<template>
  <block>
    <cover-image :src="getImageSrc(src, baseUrlType)" :mode="mode" @tap="click" :lazy-load="lazyLoad" v-if="cover"
      :style="getStyle(size)"></cover-image>
    <image :src="getImageSrc(src, baseUrlType)" :mode="mode" @tap="click" v-else :lazy-load="lazyLoad"
      :style="getStyle(size)">
    </image>
  </block>
</template>

<script>
import { getImageSrc } from '@/path/until';
export default {
  components: {},
  emits: ["onClick"],
  props: {
    /**imagecommon   image */
    baseUrlType: {
      type: String,
      default: "imagecommon",
    },
    src: {
      type: String,
      default: "",
    },
    lazyLoad: {
      type: Boolean,
      default: true,
    },
    cover: {
      type: Boolean,
      default: false,
    },
    mode: {
      type: String,
      default: "",
    },
    // 以*分割   宽*高
    size: {
      type: String,
      default: "",
    },
  },
  setup(_, { emit }) {
    return {
      click() {
        emit("click")
      },
      getImageSrc,
      getStyle(size) {
        let _str = "";
        if (typeof size === "string" && size.length > 0) {
          const [w, h] = size.split("*");
          let _w = (w.indexOf("%") > -1 || w.indexOf("x") > -1 || w.indexOf("X") > -1) ? w : w + "rpx";
          let _h = (h.indexOf("%") > -1 || h.indexOf("x") > -1 || h.indexOf("X") > -1) ? h : h + "rpx";
          _str += `width:${_w};height:${_h}`;
        }
        return _str;
      },
    };
  },
};
</script>

<style lang="less"></style>